<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <h2>欢迎使用商品管理系统</h2>
            <hr />
        </div>

        <div>
            <el-form :inline="true"  class="demo-form-inline">
                <el-form-item label="商品名称">
                    <el-input v-model="name" placeholder="商品名称"></el-input>
                </el-form-item>
                <el-form-item label="商品类型">
                    <el-select v-model="tid" placeholder="商品类型">
                        <el-option  label="请选择" value="0"></el-option>
                        <el-option v-for="t in typeList" :label="t.typeName" :value="t.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="button" class="primary" @click="search">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-button type="primary" @click="showAddDialog">添加商品</el-button>
        <!--添加对话框-->
        <el-dialog title="添加商品" :visible.sync="addGoodsDialogFormVisible" :close-on-click-modal="false">
            <el-form :model="goods" ref="addGoodsForm">
                <el-form-item label="商品名称" :label-width="formLabelWidth">
                    <el-input v-model="goods.gname" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="商品类型" :label-width="formLabelWidth">
                    <el-select v-model="goods.goodsType.id" placeholder="商品类型">
                        <el-option  label="请选择" value="0"></el-option>
                        <el-option v-for="t in typeList" :label="t.typeName" :value="t.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="价格" :label-width="formLabelWidth">
                    <el-input v-model="goods.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="库存" :label-width="formLabelWidth">
                    <el-input v-model="goods.storeCount" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelAddGoodsDialog">取 消</el-button>
                <el-button type="button" class="primary" @click="addGoods">确 定</el-button>
            </div>
        </el-dialog>
        <div>
            <el-table
                    :data="goodsList"
                    style="width: 100%"
                    :row-class-name="tableRowClassName">
                <el-table-column
                        type="selection"
                        width="90">
                </el-table-column>
                <el-table-column
                        prop="gname"
                        label="商品名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="goodsType.typeName"
                        label="商品类型"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="价格">
                </el-table-column>

                <el-table-column
                        prop="storeCount"
                        label="库存">
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="edit(scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="del(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[2, 4, 8, 16]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>

    <script>
        let vueApp = new Vue({
            el:"#app",
            data:{
                addGoodsDialogFormVisible:false,
                formLabelWidth:'120px',
                pageNum:1,
                pageSize:2,
                name:'',
                tid:'0',
                total:0,
                goodsList:[],
                typeList:[],
                goods:{
                    gname:'',
                    price:'',
                    storeCount:'',
                    goodsType:{
                        id:'0'
                    }
                }
            },
            methods:{
                //添加商品
                addGoods(){
                    console.log(this.goods)
                    let url = "/goods/add" ;
                    axios.post(url,this.goods).then((res)=>{
                        if (res.data.code == 200){
                            alert(res.data.message);
                            this.addGoodsDialogFormVisible = false ;
                            this.$refs.addGoodsForm.resetFields();
                            this.initGoodsData();
                        }else {
                            alert(res.data.message);
                        }
                    })
                },
                //关闭添加对话框
                cancelAddGoodsDialog(){
                    this.addGoodsDialogFormVisible = false ;
                    this.$refs.addGoodsForm.resetFields();
                },
                //显示添加对话框
                showAddDialog(){
                    this.addGoodsDialogFormVisible = true ;
                },
                //删除
                del(id){

                },
                //编辑
                edit(obj){

                },
                search(){
                    this.pageNum = 1;
                    this.initGoodsData();
                },
                handleSizeChange(size){
                    this.pageNum = 1;
                    this.pageSize = size ;
                    this.initGoodsData();
                },
                handleCurrentChange(now){
                    this.pageNum = now;
                    this.initGoodsData();
                },
                initGoodsData(){
                    let url = "/goods/list";
                    axios.get(url,{
                        params:{
                            now:this.pageNum,
                            size:this.pageSize,
                            name:this.name,
                            tid:this.tid
                        }
                    }).then((res)=>{
                        if (res.data.code == 200){
                            this.pageNum = res.data.data.pageNum;
                            this.pageSize = res.data.data.pageSize;
                            this.total = res.data.data.total;
                            this.goodsList = res.data.data.list;
                        }else {
                            alert(res.data.message);
                        }
                    });
                },
                initGoodsTypeData(){
                    let url = "/goods/typeList";
                    axios.get(url).then((res)=>{
                        if (res.data.code == 200){
                            this.typeList = res.data.data;
                        }else {
                            alert(res.data.message);
                        }
                    });
                },
                tableRowClassName({row, rowIndex}) {
                    if (rowIndex === 1) {
                        return 'warning-row';
                    } else if (rowIndex === 3) {
                        return 'success-row';
                    }
                    return '';
                }
            },
            created(){
                this.initGoodsData();
                this.initGoodsTypeData();
            }
        });
    </script>

</body>
</html>